<script lang="ts" setup>
import type { DressResourceApi } from '#/api/wedding/dressresource';

import { ref, onMounted } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';

import ThemeConfigEditor from './theme-config-editor.vue';
import { getGlobalThemeConfig, setGlobalThemeConfig } from '#/utils/theme-defaults';

defineOptions({ name: 'GlobalThemeSettings' });

const themeConfig = ref<DressResourceApi.MobileThemeConfig>({});

const [Modal, modalApi] = useVbenModal({
  onConfirm() {
    try {
      setGlobalThemeConfig(themeConfig.value);
      message.success('全局默认主题已保存');
      modalApi.close();
    } catch (error) {
      message.error('保存失败');
    }
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      // 加载当前全局主题配置
      themeConfig.value = getGlobalThemeConfig();
    }
  },
});

onMounted(() => {
  themeConfig.value = getGlobalThemeConfig();
});
</script>

<template>
  <Modal title="全局默认主题设置" width="1000px">
    <div class="p-4">
      <div class="mb-4 p-4 bg-blue-50 rounded-lg">
        <h3 class="text-sm font-semibold text-blue-800 mb-2">📌 说明</h3>
        <ul class="text-sm text-blue-700 space-y-1">
          <li>• 全局默认主题会应用到所有未单独配置主题的婚纱</li>
          <li>• 如果婚纱单独配置了主题，则优先使用婚纱的主题</li>
          <li>• 修改全局主题后，移动端会立即应用新主题</li>
        </ul>
      </div>
      
      <ThemeConfigEditor v-model:value="themeConfig" />
    </div>
  </Modal>
</template>

